<template>
  <div class="loginzhu-container">
    <div style="height: 60px"></div>
    <el-row>
      <div :class="state.isDengLu ? 'dengluziti' : 'noDengLu'" @click="isGh">
        <span>工号登录</span>
      </div>
      <div style="width: 20px"></div>
      <div
        :class="!state.isDengLu ? 'dengluziti' : 'noDengLu'"
        @click="isMobile"
      >
        <span>手机号登录</span>
      </div>
    </el-row>
    <div style="height: 50px"></div>
    <el-form
      ref="formRef"
      class="shurukuang"
      :inline-message="true"
      :model="loginFormRef"
    >
      <el-row style="margin-bottom: 12px; border-bottom: 1px solid #e0e0e0">
        <el-col :span="6">
          <el-select
            v-model="loginFormRef.pkCorp"
            class="m-2"
            placeholder="Select"
            size="large"
          >
            <el-option
              v-for="item in state.pks"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-col>
        <el-col align="center" :span="1">
          <div class="shu-fenge-xian2"></div>
        </el-col>
        <el-form-item prop="userid">
          <el-input v-model="loginFormRef.userid" placeholder="公司工号" />
        </el-form-item>
      </el-row>
      <el-row style="margin-bottom: 12px; border-bottom: 1px solid #e0e0e0">
        <el-col class="c_password" :span="24">
          <el-form-item prop="password">
            <el-input
              v-model="loginFormRef.password"
              :loading="state.loading"
              placeholder="密码"
              show-password
              style="margin-left: 4px"
              :type="state.passwordType"
              @keyup.enter="handleLogin"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <div style="height: 68px"></div>
      <el-row>
        <el-button style="width: 700px" type="primary" @click="handleLogin">
          登录
        </el-button>
      </el-row>
      <div style="height: 45px"></div>
      <el-row>
        <span class="xieyi">
          登录，注册即代表同意《MOM协议》《隐私保护指引》《MOM技术支持》
        </span>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
  // import { userLoginApi } from '@/api/comdesk/user'
  import { localStorageConfig } from '@/config/localstorage.config'
  import { useUserStore } from '@/store/modules/user'

  // const pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)
  const route = useRoute()
  const router = useRouter()
  const userStore = useUserStore()

  const state = reactive({
    isDengLu: true,
    loading: false,
    passwordType: 'password',
    redirect: undefined,
    pks: __pks ? __pks : [],
  })

  const loginFormRef = ref({
    pkCorp: '1002',
    userid: '',
    password: '',
  })

  const isGh = () => (state.isDengLu = true)

  const isMobile = () => (state.isDengLu = false)

  const handleRoute = () => {
    return state.redirect === '/404' || state.redirect === '/403'
      ? '/'
      : state.redirect
  }

  const userLogin = (loginFormRef) => userStore.userLogin(loginFormRef)

  const handleLogin = async () => {
    await userLogin(loginFormRef.value)
    localStorage.setItem(localStorageConfig.__pkCorp, loginFormRef.value.pkCorp)
    await router.push(handleRoute())
  }

  watchEffect(() => {
    state.redirect = (route.query && route.query.redirect) || '/'
  })
</script>

<style scoped lang="scss">
  .loginzhu-container {
    height: 500px;
    :deep() {
      .el-button:focus,
      .el-button:hover {
        background-color: #79bbff;
        border-color: #79bbff;
      }
    }
  }
  .dengluziti {
    padding-bottom: 10px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    border-bottom: 3px solid #1557f3;
  }
  .noDengLu {
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
  }

  .shurukuang {
    margin-right: 20px;
    :deep() {
      .el-input {
        .el-input__wrapper {
          box-shadow: 0 0 0 0px var(--el-input-focus-border-color) inset;
        }
      }
      .el-form-item {
        margin-bottom: 6px;
      }
    }
    .c_password {
      :deep() {
        .el-form-item__error--inline {
          margin-left: 14px;
        }
      }
    }
  }

  .xieyi {
    font-size: 12px;
    color: #7f8490;
  }
</style>
